import { h } from "vue";
import { ElImage, ElPopover } from "element-plus";
import type { ColumnItem } from "../types/index.d";
function renderImage(item: ColumnItem, row: any) {
  // const getObjValue = (prop: string, data: any) => {
  //   const propList = prop.trim().split(".");
  //   propList.forEach(x => {
  //     if (!data) return;
  //     data = data[x];
  //   });
  //   return data;
  // };
  // const value = getObjValue(item.prop, row);
  const imageSrc = row[item.prop];
  // 处理图片渲染，避免传递 Vue 实例或其他复杂对象
  if (imageSrc) {
    const vnodeImg = h(ElImage, {
      src: imageSrc || "",
      style: { width: "100px" },
      loading: "eager",
      lazy: true
    });
    const vnodeCom = h(
      ElPopover,
      {
        trigger: "hover", // 设置触发方式
        placement: "right-start"
      },
      {
        default: () => vnodeImg,
        reference: () => vnodeImg
      }
    ); // 返回一个简单的 span
    return vnodeCom;
  } else {
    return h("span", null, "暂无图片"); // 返回一个简单的 span
  }
}

export default renderImage;
